<template>
	<div>
		<div class="main-header f-row">
			<div class="f-row f-full">
				<div class="main-title f-animate f-row" :style="{ width: width + 'px' }">
					<img class="app-logo" src="https://www.jeasyui.com/favicon.ico" />
					<span v-if="!collapsed">{{ title }}</span>
				</div>
				<div class="main-bar f-full"><span class="main-toggle fa fa-bars" @click="toggle()"></span></div>
				<div class="main-bar" style="text-align: right;">
					<span class="main-toggle fa fa-sign-out" @click="logout()"></span>
				</div>
			</div>
		</div>
		<Layout :style="{ width: '100%', height: h - 50 + 'px' }">
			<LayoutPanel
				:split="true"
				:bodyStyle="{ padding: '5px' }"
				:panelStyle="{ width: width + 'px', minWidth: width + 'px', float: 'left' }"
			>
				<SideMenu
					:animte="true"
					:data="menus"
					:border="false"
					:collapsed="collapsed"
					@itemClick="onItemClick($event)"
				></SideMenu>
			</LayoutPanel>

			<Tabs
				:fit="true"
				:scrollable="true"
				:selectedIndex="tabsIndex"
				@tabClose="tabClose"
				@tabSelect="tabSelect"
				ref="tabs"
				:border="true"
			>
				<TabPanel
					v-for="(item, index) in tabs"
					:key="item.id"
					:index="index"
					:title="item.value"
					:closable="index !== 0"
					:iconCls="item.iconCls"
					bodyCls="f-column"
					:border="false"
				/>
				<div class="content"><router-view></router-view></div>
			</Tabs>
		</Layout>
	</div>
</template>

<script>
import { SetObject } from '@/common/utils/set.util.js';
import { ArrayRemove } from '@/common/utils/arrays.util';
import { BinaryTree, SearchBinaryTree, DepthSearch } from '@/common/utils/menu.util';
import { GeneratorTree } from '@/common/utils/tree.util';

export default {
	data() {
		return {
			title: '管理后台',
			width: 250,
			collapsed: false,
			selectedMenu: null,
			tabs: [], // tabs
			tabsIndex: 0, // tabs开启索引
			menus: [],
			binaryMenus: null
		};
	},
	created() {
		this.$e.jumpway.toCondition(102, null, this.$user.isGuest());
		this.$e.api.menus().then(res => {
			let [menus] = res;

			let generatorTree = new GeneratorTree(menus, 'id', 'pid', 'children', 'sort', function(item) {
				return {
					id: item['id'],
					text: item['title'],
					iconCls: item['iconCls'],
					name: item['name']
				};
			});

			this.menus = generatorTree.tree('0');
			this.binaryMenus = BinaryTree(this.menus);
			this.tabs = this.$store.getters.getValue('system.tabs', [generatorTree.default]);
			this.tabsIndex = this.$store.getters.getValue('system.tabsIndex', 0);
			this.collapsed = this.$store.getters.getValue('system.collapsed.active', false);
			this.width = this.$store.getters.getValue('system.collapsed.width', 200);
			this.selectMenuItem();
			this.saveTabs();
		});
	},
	methods: {
		toggle() {
			this.collapsed = !this.collapsed;
			this.width = this.collapsed ? 50 : 250;
			this.saveTabs();
		},
		selectMenuItem() {
			let item = this.tabs[this.tabsIndex];
			if (item) {
				this.$e.jumpway.to(item.name);
				let map = {};
				SearchBinaryTree(this.binaryMenus, item.id, map);
				let newMenus = [];
				DepthSearch(this.menus, newMenus, map);
				this.menus = newMenus;
			}
		},
		tabClose(panel) {
			let index = panel.$attrs.index;
			this.tabs = ArrayRemove(this.tabs, index);
			this.tabsIndex = index > this.tabsIndex ? this.tabsIndex : this.tabsIndex - 1 < 0 ? 0 : this.tabsIndex - 1;
			this.$refs.tabs.select(this.tabsIndex);
			// 查找活动index
			this.saveTabs();
		},
		tabSelect(panel) {
			this.tabsIndex = panel.$attrs.index;
			this.selectMenuItem();
			this.saveTabs();
		},
		onItemClick(item) {
			let tab = { name: item.name, value: item.text, id: item.id, iconCls: item.iconCls };
			let [, current, index] = SetObject(this.tabs, tab, 'id');
			this.$nextTick(() => {
				this.$refs.tabs.select(index);
				this.tabsIndex = index;
				this.saveTabs();
			});

			// this.$e.jumpway.to(item.name)

			// this.selectMenuItem(item.id)

			// console.log(item)

			//          "nodeCls": "tree-node-selected"

			//
			// this.selectedMenu = item;
		},
		saveTabs() {
			this.$store.dispatch('saveAll', [
				{ name: 'system.tabsIndex', value: this.tabsIndex },
				{ name: 'system.tabs', value: this.tabs },
				{ name: 'system.collapsed.active', value: this.collapsed },
				{ name: 'system.collapsed.width', value: this.width }
			]);
		},
		logout() {
			this.$messager.confirm({
				title: '提示',
				msg: '确定注销系统？',
				result: r => {
					if (r) {
						this.$user.logout();
						this.$e.jumpway.to(102);
					}
				}
			});
		}
	},
	computed: {
		/**
		 * 当前活动tabPlane元素
		 * @returns {*|{}}
		 */
		activeTab: function() {
			return this.tabs[this.tabsIndex] || {};
		},
		h: function() {
			return this.$store.getters.getValue('vuex.web.window.height', 600);
		}
	},
	mounted() {
		// console.log("活动元素：", this.activeTab)
	}
};
</script>

<style scoped="scoped">
.content {
	padding: '5px';
	backgroundcolor: ghostwhite;
}
.app-logo {
	width: 24px;
	height: 24px;
	color: #fff;
	margin: 13px 10px;
}

.main-header {
	background: #3c8dbc;
	color: #fff;
	line-height: 50px;
	height: 50px;
}

.main-title {
	background: #367fa9;
	font-size: 20px;
	text-align: center;
	overflow: hidden;
}

.main-bar {
	background: #3c8dbc;
}

.main-toggle {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	cursor: pointer;
	color: #fff;
	margin: 0 10px;
}

.sidebar-user {
	padding: 20px;
	line-height: 20px;
	border: 1px solid lightgray;
}
</style>
